import { Breadcrumb, Card } from 'antd'
import Search from '@/components/article/search'
import ArticleTable from '@/components/article/table'
import { useEffect, useState } from 'react'
import { http } from '@/service'

function Article({ onSearch }) {
  // 获取列表数据
  const [list, setList] = useState({
    list: [],
    total: 0,
    loading: true,
  })
  const [params, setParams] = useState({
    page: 1,
    per_page: 5,
  })
  useEffect(() => {
    const getList = async () => {
      setList({ loading: true })
      const res = await http.get('/mp/articles', { params })
      const { results, total_count } = res.data
      setList({ list: results, total: total_count, loading: false })
    }
    getList()
  }, [params])

  // 点击搜索
  const handlerSearch = (values) => {
    setParams({
      ...params,
      ...values,
    })
  }
  // 重置
  const handlerReset = () => {
    setParams({
      page: 1,
      per_page: 10,
    })
  }
  // 点击分页
  const changePageination = (value) => {
    const { current, pageSize } = value
    setParams({
      ...params,
      page: current,
      per_page: pageSize,
    })
  }
  return (
    <Card>
      {/* 面包屑 */}
      <Breadcrumb
        items={[
          {
            title: '首页',
          },
          {
            title: '文章光临',
          },
        ]}
      />
      {/* 搜索框 */}
      <Search onSearch={handlerSearch} onReset={handlerReset} />
      <ArticleTable
        data={list}
        params={params}
        changePageination={changePageination}
        updata={handlerReset}
      />
    </Card>
  )
}

export default Article
